/* stylelint-disable liberty/use-logical-spec */
.ftVideoPlayer {
  display: flex;
  position: relative;

  /*
    For vertical videos and full window mode the background is visible,
    so we want to make it black as it defaults to transparent
   */
  background-color: #000;

  /*
    Fixes the seek bar thumbnails causing a horizontal scroll bar
    to appear after exiting full screen and full window.
    But also vertically in case context menu overflows.
  */
  overflow: hidden;
}

.player {
  width: 100%;
}

.vrCanvas {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

:deep(.shaka-bottom-controls) {
  /*
    Force left to right, so that the UI doesn't break.
    With rtl, the progress bar was filling from the left, but the scrubber was moving from the right.
    video.js forced the direction for their controls too
  */
  direction: ltr;

  /* Place the seek bar above the controls (the default is below) */
  display: flex;
  flex-direction: column-reverse;
}

/*
  Apply the active FreeTube base theme to shaka-player's menus.
  Usually we go for classes and not element names,
  however as we need to override shaka-player's CSS
  we need to use the same selectors that they do.
*/

:deep(.shaka-overflow-menu),
:deep(.shaka-settings-menu) {
  background: var(--card-bg-color) !important;
  max-height: 200px;

}

:deep(.shaka-overflow-menu button),
:deep(.shaka-settings-menu button) {
  color: var(--primary-text-color) !important;
}

:deep(.shaka-overflow-menu button:hover),
:deep(.shaka-settings-menu button:hover) {
  background: var(--side-nav-hover-color) !important;
  color: var(--side-nav-hover-text-color) !important;
}

:deep(.shaka-overflow-menu-only .shaka-current-selection-span) {
  color: var(--tertiary-text-color) !important;
}

/* End of theming code */

.sixteenByNine {
  aspect-ratio: 16 / 9;
}

.stats {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 10px;
  border-radius: 5px;
  line-height: 1.4em;
  background-color: rgb(0 0 0 / 70%);
  color: #fff;
  z-index: 2;

  /* user-select is intentionally not disabled, so that you can select and copy the stats */
}

.valueChangePopup {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  border-radius: 5px;
  font-size: 1.1em;
  background-color: rgb(0 0 0 / 70%);
  color: #fff;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.offlineWrapper {
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  margin-inline-start: 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  background-color: #000;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
}

.offlineIcon {
  font-size: 30px;
}

.offlineMessage {
  margin: 0;
}

.offlineMessageSubtitle {
  font-size: 0.8em;
}

:deep(.shaka-volume-bar-container) {
  flex-shrink: initial;
}

.skippedSegmentsWrapper {
  position: absolute;
  right: 2%;
  bottom: max(15%, calc(46px + 2.5% + 3%)); /* 46px + 2.5% is the height of the controls */
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.skippedSegment {
  margin-block: 0;
  padding: 10px;
  border-radius: 20px;
  background-color: rgb(0 0 0 / 80%);
  color: #fff;
}

:deep(.markerContainer) {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

:deep(.sponsorBlockMarker) {
  background-color: var(--primary-color);
}

:deep(.chapterMarker) {
  width: 2px;
  background-color: #000;
}

:deep(.sponsorBlockMarker),
:deep(.chapterMarker) {
  position: absolute;
  opacity: 0.6;
  height: 100%;
}

:deep(.playerFullscreenTitleOverlay) {
  display: none;
  opacity: 0;
  position: absolute;
  margin: 0;
  top: 5px;
  left: 5px;
  max-width: calc(100% - 10px);
  font-size: xx-large;
  color: #fff;
  font-weight: normal;
  background-color: rgb(0 0 0 / 50%);
  border-radius: 5px;
  user-select: none;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  overflow: hidden;

  /* copied from .shaka-scrim-container */
  transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 0.6s;
}

:global(body[dir='rtl'] .playerFullscreenTitleOverlay) {
  left: initial;
  right: 5px;
}

.ftVideoPlayer:fullscreen :deep(.playerFullscreenTitleOverlay) {
  display: block;
}

:deep(.shaka-controls-container[shown='true'] > .playerFullscreenTitleOverlay) {
  opacity: 1;
}

:deep(.shaka-controls-container > .shaka-play-button-container > .shaka-play-button) {
  padding: min(calc(15% / 2), 55px);
}

.ftVideoPlayer:fullscreen :deep(.theatre-button),
.ftVideoPlayer:fullscreen :deep(.full-window-button),
.fullWindow :deep(.theatre-button) {
  display: none;
}

.fullWindow {
  position: absolute !important;
  max-width: initial !important;
  inset: 0;
  z-index: 1000;
}

.fullWindow > .player {
  width: 100%;
  height: 100%;
}

/* added to the body element */
:global(.playerFullWindow) {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

@media only screen and (width <=400px) {
  :deep(.shaka-text-container) {
    /* make subtitles take up slightly less space when a mobile phone is in portrait orientation */
    font-size: 16px !important;
  }
}

@media only screen and (width <=1000px) {
  :deep(.playerFullscreenTitleOverlay) {
    font-size: large;
  }
}

@media only screen and (width >= 1000px) {
  :deep(.shaka-bottom-controls) {
    /* remove some bottom padding since the seek bar is above */
    padding-bottom: 0;

    /* make seekbar take full width on non-mobile devices */
    width: 100%;
  }

  /* increase height of captions area since we remove the padding-bottom below the seekbar */
  :deep(.shaka-controls-container[shown='true']~.shaka-text-container) {
    bottom: 12.5%;
  }

  :deep(.shaka-controls-button-panel>button) {
    height: 40px;
    line-height: 0.5;
  }

  :deep(.shaka-tooltips-on button:active::after),
  :deep(.shaka-tooltips-on button:focus-visible::after),
  :deep(.shaka-tooltips-on button:hover::after) {
    margin-bottom: 8px;
  }

  /*
    similar to the styling that shaka-player applies with last-child
    needed as we have made the controls a lot wider than they were intended to be :/
   */
  :deep(.shaka-tooltips-on button:nth-last-child(2):active::after),
  :deep(.shaka-tooltips-on button:nth-last-child(2):focus-visible::after),
  :deep(.shaka-tooltips-on button:nth-last-child(2):hover::after) {
    left: 32px;
    transform: translateX(-80%);
  }
}

@media only screen and (width <=1350px) {
  :deep(.theatre-button) {
    display: none;
  }
}

@media (prefers-reduced-transparency) {
  :deep(.playerFullscreenTitleOverlay),
  .skippedSegment {
    background-color: rgb(0 0 0 / 90%);
  }
}

@media (prefers-reduced-transparency:no-preference) {
  /* add transparency to big play button */
  :deep(.shaka-controls-container[shown='true'] > .shaka-play-button-container > .shaka-play-button) {
    opacity: 0.75 !important;
  }
}

/* stylelint-enable liberty/use-logical-spec */
